import React from 'react'

import fetch from 'isomorphic-fetch'

import { Input, Button, Select, notification } from 'antd';


var storage = window.localStorage;

const { Option } = Select;
class Userinfo extends React.Component {
  constructor(props) {
    super(props)

  }

  state = {
    sfz: "",
    openid: "",
    corplistdata: [],
    corpid: "",
    formdata: { username: "", password: "", passwordconfirm: "" },
    deviceno: ""
  }


  handlechange_normal = (key, e) => {
    //this.openNotification(e.target.value)
    let data = Object.assign({}, this.state.formdata, { [key]: e.target.value });
    this.setState({ formdata: data })
  };

  checkdatavalid = (...args) => {
    for (let item of args) {    //for of 推荐用在遍历数组
      var checkvalue = this.state.formdata[item]
      if (checkvalue == "" || checkvalue == null || checkvalue == undefined)
        return false;
    }
    return true;
  };

  //这个日期字符串获取更好用，根据需求返回三种1：年月日 2年月日时分秒 31970开始时间秒数用作id
  getCurrentDate = (format) => {
    var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth();//得到月份
    var date = now.getDate();//得到日期
    var day = now.getDay();//得到周几
    var hour = now.getHours();//得到小时
    var minu = now.getMinutes();//得到分钟
    var sec = now.getSeconds();//得到秒
    month = month + 1;
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;
    if (hour < 10) hour = "0" + hour;
    if (minu < 10) minu = "0" + minu;
    if (sec < 10) sec = "0" + sec;
    var time = "";
    //精确到天
    if (format == 1) {
      time = year + "-" + month + "-" + date;
    }
    //精确到分
    else if (format == 2) {
      time = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
    }
    else if (format == 3) {
      time = now.getTime();
    }
    else if (format == 4) {
      time = year + "--" + month + "--" + date;
    }

    return time;
  }

  //通用提醒
  openNotification = (text) => { notification.open({ message: '提示', description: text, onClick: () => { }, }); };

  handlelogin = () => {
    const { hiddenbutton, transfer, setIfxgmm } = this.props;

    if (!this.checkdatavalid("password", "passwordconfirm", "username")) {
      this.openNotification("检查表格是否为空")
      return false;
    }

    if (this.state.formdata.password !== this.state.formdata.passwordconfirm) {
      this.openNotification("两次输入密码不一致")
      return false;

    }

    var ddd = this.state;

    var logintime = this.getCurrentDate(2)

    //alert("登陆系统")
    fetch("/admin/sys/updatepassword", {
      method: 'POST',
      mode: 'cors',
      // credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ "data": this.state.formdata })
    }
    ).then(response => {

      return response.json();
    }).then(data => {

      //alert(JSON.stringify(data))
      if (data.rowlength == 0) {
        this.openNotification("验证不通过，登录失败")

      }
      else if (data.rowlength == 1) {


        var returndata = data.recordsets[0][0]
        storage.ygxm = returndata.xm;
        storage.js = returndata.js;
        storage.ygbh = returndata.gh;
        storage.userid = returndata.id;
        storage.logintime = logintime;
        //alert(JSON.stringify(storage))
        // this.openNotification(`欢迎您，${returndata.xm}!`)
        this.openNotification(`密码修改成功!`)

        //this.props.history.push({ pathname: '/chmes/mainpage', state: {} });
        setIfxgmm(false)
      }
    });



  }

  handlechangeSelect_normal_cx = (key, value, option) => {

    storage.logincx = value;

  };


  handlechangeSelect_normal_bb = (key, value, option) => {

    storage.loginbb = value;

  };


  handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      this.handlelogin()
    }
  }

  componentDidMount() {
    //this.getwxconfig();
    document.addEventListener('keydown', this.handleKeyDown);
    //this.querycorplist();

    this.setState({
      formdata: { username: storage.ygbh, password: "", passwordconfirm: "" }
    })

    // if (storage.nowurl != window.location.href) {
    //   storage.nowurl = window.location.href;
    //   window.location.reload()

    // }

  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown);
  }

  inputOnBlur = () => {
    window.scroll(0, 0);
  }


  render() {
    return (
      <div >

        <div style={{
          width: "100%",  position: "relative", fontSize: "2vw", textAlign: "center", color: "white", 
        }}>

          <div style={{
            backgroundColor: "", position: "relative", color: "black", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "5vh"
          }}
          >
            登陆人姓名
          </div>
          <Input onBlur={this.inputOnBlur} style={{
            backgroundColor: "white", position: "relative",
            width: "95%", left: "0", right: "0", margin: "2.5%", height: "2vw"
          }} disabled
            placeholder="输入您的账号" value={storage.ygxm} />


          <div style={{
            backgroundColor: "", position: "relative", color: "black", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "1vh"
          }}
          >
            员工账号
          </div>
          <Input onBlur={this.inputOnBlur} style={{
            backgroundColor: "white", position: "relative",
            width: "95%", left: "0", right: "0", margin: "2.5%", height: "2vw"
          }} disabled
            placeholder="输入您的账号" value={storage.ygbh} />

          <br />


          <div style={{
            backgroundColor: "", position: "relative", color: "#287FFF", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "1vh"
          }}
          >
            输入新密码
          </div>
          <Input style={{height:"0",padding:"0",border:"none",margin:"0",width:"0"}}/>
          <Input.Password onBlur={this.inputOnBlur}
            autoComplete="new-password"
            style={{
              position: "relative", width: "95%", left: "0", right: "0", margin: "2.5%", height: "2vw"
            }} value={this.state.formdata.password}
            placeholder="请输入您的新密码" onChange={e => this.handlechange_normal("password", e)} />
          <br />
          <div style={{
            backgroundColor: "", position: "relative", color: "#287FFF", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "1vh"
          }}
          >
            确认输入新密码
          </div>

          <Input.Password onBlur={this.inputOnBlur}
            autoComplete="new-password"
            style={{
              position: "relative", width: "95%", left: "0", right: "0", margin: "2.5%", height: "2vw"
            }} value={this.state.formdata.passwordconfirm}
            placeholder="确认输入您的密码" onChange={e => this.handlechange_normal("passwordconfirm", e)} />
          <br />

          <Button type="primary" onClick={this.handlelogin}
            style={{
              position: "relative", height: "2vw", fontSize: "1vw", width: "95%", left: "0",
              right: "0", margin: "auto", color: "rgb(254,209,0)"
            }}
            large><strong>修改密码并登录</strong></Button>

        </div>

      </div>
    )
  }
}

export default Userinfo
//styles
var styles = {
  containertyle: {
    height: "92vh", width: "100vw", position: "absolute",
    left: "0", right: "0", margin: "auto",
    top: "0", backgroundImage: "linear-gradient(to bottom right, #00AAEB , #A28CB9)"
  }

}






